<template>
  <view class="pointOrder" v-for="item in pointOrderInfo" :key="item.orderId">
    <view class="orderNumber">
      <view class="orderNumber-left">
         <text>订单号：</text>
        <text>{{item.orderId}}</text>
      </view>
      <view class="orderNumber-right">
        <text>{{item.orderStatus}}</text>
      </view>
    </view>
    <view class="order-detail">
      <view class="img">
        <image :src='item.imgSrc' mode="aspectFit"></image>
      </view>
      <view class="order-text">
        <text style="color: #333;">{{item.orderName}}</text>
        <view class="point">
          <text class="order-text-main">{{item.point}}</text>
          <text style="font-size: 12px;">积分</text>
        </view>
        
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
 import {useMemberInfoStore} from '@/store/pinia/memberInfo'
 
 const memberStore = useMemberInfoStore()
 const pointOrderInfo = memberStore.pointOrderInfo
</script>

<style lang="scss" scoped>
  page{
    background-color: #eee;
    height: 100%;
  }
.pointOrder{
  color: #333;
  font-size: 14px;
  border: 1px solid #ccc;
  .orderNumber{
    border: 1px solid #ccc;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10rpx 20rpx;
    .orderNumber-left{
      
    }
    .orderNumber-right{
      color: red;
    }
  }
  .order-detail{
    background-color: #fff;
    padding: 10rpx 40rpx;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .img{
      image{
        width: 140rpx;
        height: 140rpx;
        margin: 0 20rpx;
      }
    }
    .order-text{
      color: red;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
      &:nth-child(1){
        color: #333;
      }
      .order-text-main{
        font-size: 16px;
      }
    }
  }
}
</style>
